<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>游戏中心</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Arial', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
      width: 90%;
      max-width: 800px;
      text-align: center;
    }

    .login-form {
      max-width: 400px;
      margin: 0 auto;
    }

    .login-form h1 {
      color: #333;
      margin-bottom: 30px;
      font-size: 2.5em;
    }

    .input-group {
      margin-bottom: 20px;
      text-align: left;
    }

    .input-group label {
      display: block;
      margin-bottom: 5px;
      color: #555;
      font-weight: bold;
    }

    .input-group input {
      width: 100%;
      padding: 12px;
      border: 2px solid #ddd;
      border-radius: 10px;
      font-size: 16px;
      transition: border-color 0.3s;
    }

    .input-group input:focus {
      outline: none;
      border-color: #667eea;
    }

    .btn {
      background: linear-gradient(45deg, #667eea, #764ba2);
      color: white;
      padding: 12px 30px;
      border: none;
      border-radius: 25px;
      font-size: 16px;
      cursor: pointer;
      transition: transform 0.2s;
      margin: 10px;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .game-menu {
      display: none;
    }

    .game-menu h1 {
      color: #333;
      margin-bottom: 30px;
    }

    .welcome-text {
      margin-bottom: 30px;
      font-size: 18px;
      color: #555;
    }

    .games-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .game-card {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      color: white;
      padding: 30px;
      border-radius: 15px;
      cursor: pointer;
      transition: transform 0.3s;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .game-card:hover {
      transform: translateY(-5px);
    }

    .game-card h3 {
      margin-bottom: 15px;
      font-size: 1.5em;
    }

    .game-card p {
      font-size: 14px;
      opacity: 0.9;
    }

    .snake-card {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .moon-card {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .game-container {
      display: none;
      max-width: 600px;
      margin: 0 auto;
    }

    .game-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .game-header h2 {
      color: #333;
    }

    .score {
      font-size: 18px;
      font-weight: bold;
      color: #667eea;
    }

    #gameCanvas {
      border: 3px solid #333;
      border-radius: 10px;
      background: #000;
      display: block;
      margin: 0 auto;
    }

    .game-controls {
      margin-top: 20px;
    }

    .game-instructions {
      margin-top: 15px;
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }

    .hidden {
      display: none;
    }

    .logout-btn {
      background: linear-gradient(45deg, #ff6b6b, #ee5a52);
    }

    .back-btn {
      background: linear-gradient(45deg, #4ecdc4, #44a08d);
    }
  </style>

</head>
<body>
<div class="container">
  <!-- 登录页面 -->
  <div id="loginPage" class="login-form">
    <h1>🎮 游戏中心</h1>
    <div class="input-group">
      <label for="username">用户名</label>
      <input type="text" id="username" placeholder="请输入用户名" required>
    </div>
    <div class="input-group">
      <label for="password">密码</label>
      <input type="password" id="password" placeholder="请输入密码" required>
    </div>
    <button class="btn" onclick="login()">登录</button>
    <p style="margin-top: 15px; color: #666; font-size: 14px;">
      提示：任意用户名和密码都可以登录
    </p>
  </div>
  <!-- 游戏菜单 -->
  <div id="gameMenu" class="game-menu">
    <h1>欢迎来到游戏中心！</h1>
    <div class="welcome-text">
      <span id="welcomeUser"></span>，选择你想要玩的游戏：
    </div>
    <div class="games-grid">
      <div class="game-card snake-card" onclick="startSnake()">
        <h3>🐍 贪吃蛇</h3>
        <p>经典的贪吃蛇游戏，使用方向键控制蛇的移动，吃到食物得分！</p>
      </div>
      <div class="game-card moon-card" onclick="startMoonLanding()">
        <h3>🚀 登月游戏</h3>
        <p>控制飞船安全着陆在月球表面，小心燃料和着陆速度！</p>
      </div>
    </div>
    <button class="btn logout-btn" onclick="logout()">退出登录</button>
  </div>

  <!-- 贪吃蛇游戏 -->
  <div id="snakeGame" class="game-container">
    <div class="game-header">
      <h2>🐍 贪吃蛇</h2>
      <div class="score">分数: <span id="snakeScore">0</span></div>
    </div>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <div class="game-controls">
      <button class="btn" onclick="pauseSnake()" id="pauseBtn">暂停</button>
      <button class="btn" onclick="restartSnake()">重新开始</button>
      <button class="btn back-btn" onclick="backToMenu()">返回菜单</button>
    </div>
    <div class="game-instructions">
      使用方向键 ↑↓←→ 控制蛇的移动<br>
      吃到红色食物可以得分并增长身体<br>
      避免撞到墙壁和自己的身体
    </div>
  </div>

  <!-- 登月游戏 -->
  <div id="moonGame" class="game-container">
    <div class="game-header">
      <h2>🚀 登月游戏</h2>
      <div class="score">
        燃料: <span id="fuel">100</span>% |
        速度: <span id="velocity">0</span>
      </div>
    </div>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <div class="game-controls">
      <button class="btn" onclick="thrustUp()" id="thrustBtn">🔥 推进器</button>
      <button class="btn" onclick="restartMoon()">重新开始</button>
      <button class="btn back-btn" onclick="backToMenu()">返回菜单</button>
    </div>
    <div class="game-instructions">
      点击"推进器"按钮或按空格键来推进飞船<br>
      目标：安全着陆在月球表面（速度 < 5）<br>
      小心燃料消耗和着陆速度！
    </div>
  </div>
</div>

<script>
  // 全局变量
  let currentUser = '';
  let currentGame = null;

  // 登录功能
  function login() {
    const username = document.getElementById('username').value.trim();
    const password = document.getElementById('password').value.trim();

    if (username && password) {
      currentUser = username;
      document.getElementById('welcomeUser').textContent = username;
      showPage('gameMenu');
    } else {
      alert('请输入用户名和密码！');
    }
  }

  // 退出登录
  function logout() {
    currentUser = '';
    document.getElementById('username').value = '';
    document.getElementById('password').value = '';
    showPage('loginPage');
  }

  // 显示指定页面
  function showPage(pageId) {
    const pages = ['loginPage', 'gameMenu', 'snakeGame', 'moonGame'];
    pages.forEach(id => {
      document.getElementById(id).style.display = id === pageId ? 'block' : 'none';
    });
  }

  // 返回游戏菜单
  function backToMenu() {
    if (currentGame) {
      currentGame.stop();
    }
    showPage('gameMenu');
  }

  // 贪吃蛇游戏
  class SnakeGame {
    constructor() {
      this.canvas = document.getElementById('gameCanvas');
      this.ctx = this.canvas.getContext('2d');
      this.gridSize = 20;
      this.snake = [{x: 200, y: 200}];
      this.direction = {x: 0, y: 0};
      this.food = this.generateFood();
      this.score = 0;
      this.gameLoop = null;
      this.paused = false;

      this.setupControls();
    }

    setupControls() {
      document.addEventListener('keydown', (e) => {
        if (document.getElementById('snakeGame').style.display === 'none') return;

        switch(e.key) {
          case 'ArrowUp':
            if (this.direction.y === 0) this.direction = {x: 0, y: -this.gridSize};
            break;
          case 'ArrowDown':
            if (this.direction.y === 0) this.direction = {x: 0, y: this.gridSize};
            break;
          case 'ArrowLeft':
            if (this.direction.x === 0) this.direction = {x: -this.gridSize, y: 0};
            break;
          case 'ArrowRight':
            if (this.direction.x === 0) this.direction = {x: this.gridSize, y: 0};
            break;
        }
      });
    }

    generateFood() {
      return {
        x: Math.floor(Math.random() * (this.canvas.width / this.gridSize)) * this.gridSize,
        y: Math.floor(Math.random() * (this.canvas.height / this.gridSize)) * this.gridSize
      };
    }

    draw() {
      // 清空画布
      this.ctx.fillStyle = '#000';
      this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

      // 绘制蛇
      this.ctx.fillStyle = '#0f0';
      this.snake.forEach(segment => {
        this.ctx.fillRect(segment.x, segment.y, this.gridSize - 2, this.gridSize - 2);
      });

      // 绘制食物
      this.ctx.fillStyle = '#f00';
      this.ctx.fillRect(this.food.x, this.food.y, this.gridSize - 2, this.gridSize - 2);
    }

    update() {
      if (this.paused) return;

      const head = {x: this.snake[0].x + this.direction.x, y: this.snake[0].y + this.direction.y};

      // 检查碰撞
      if (head.x < 0 || head.x >= this.canvas.width ||
              head.y < 0 || head.y >= this.canvas.height ||
              this.snake.some(segment => segment.x === head.x && segment.y === head.y)) {
        this.gameOver();
        return;
      }

      this.snake.unshift(head);

      // 检查是否吃到食物
      if (head.x === this.food.x && head.y === this.food.y) {
        this.score += 10;
        document.getElementById('snakeScore').textContent = this.score;
        this.food = this.generateFood();
      } else {
        this.snake.pop();
      }

      this.draw();
    }

    start() {
      this.gameLoop = setInterval(() => this.update(), 150);
      this.draw();
    }

    pause() {
      this.paused = !this.paused;
      document.getElementById('pauseBtn').textContent = this.paused ? '继续' : '暂停';
    }

    restart() {
      this.stop();
      this.snake = [{x: 200, y: 200}];
      this.direction = {x: 0, y: 0};
      this.food = this.generateFood();
      this.score = 0;
      this.paused = false;
      document.getElementById('snakeScore').textContent = '0';
      document.getElementById('pauseBtn').textContent = '暂停';
      this.start();
    }

    gameOver() {
      this.stop();
      alert(`游戏结束！最终得分：${this.score}`);
    }

    stop() {
      if (this.gameLoop) {
        clearInterval(this.gameLoop);
        this.gameLoop = null;
      }
    }
  }

  // 登月游戏
  class MoonLandingGame {
    constructor() {
      this.canvas = document.getElementById('gameCanvas');
      this.ctx = this.canvas.getContext('2d');
      this.reset();
      this.gameLoop = null;
      this.setupControls();
    }

    reset() {
      this.ship = {
        x: this.canvas.width / 2,
        y: 50,
        vx: 0,
        vy: 0,
        width: 20,
        height: 30
      };
      this.fuel = 100;
      this.thrust = false;
      this.landed = false;
      this.crashed = false;
      this.gravity = 0.1;
      this.thrustPower = 0.3;
    }

    setupControls() {
      document.addEventListener('keydown', (e) => {
        if (document.getElementById('moonGame').style.display === 'none') return;
        if (e.key === ' ') {
          e.preventDefault();
          this.activateThrust();
        }
      });
    }

    activateThrust() {
      if (this.fuel > 0 && !this.landed && !this.crashed) {
        this.thrust = true;
        this.fuel -= 2;
        if (this.fuel < 0) this.fuel = 0;
      }
    }

    draw() {
      // 清空画布
      this.ctx.fillStyle = '#001';
      this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

      // 绘制星星
      this.ctx.fillStyle = '#fff';
      for (let i = 0; i < 50; i++) {
        const x = (i * 37) % this.canvas.width;
        const y = (i * 23) % (this.canvas.height - 50);
        this.ctx.fillRect(x, y, 1, 1);
      }

      // 绘制月球表面
      this.ctx.fillStyle = '#666';
      this.ctx.fillRect(0, this.canvas.height - 30, this.canvas.width, 30);

      // 绘制着陆区
      this.ctx.fillStyle = '#0f0';
      this.ctx.fillRect(150, this.canvas.height - 30, 100, 5);

      // 绘制飞船
      this.ctx.fillStyle = this.crashed ? '#f00' : '#fff';
      this.ctx.fillRect(this.ship.x - this.ship.width/2, this.ship.y, this.ship.width, this.ship.height);

      // 绘制推进器火焰
      if (this.thrust && this.fuel > 0) {
        this.ctx.fillStyle = '#ff0';
        this.ctx.fillRect(this.ship.x - 5, this.ship.y + this.ship.height, 10, 15);
      }
    }

    update() {
      if (this.landed || this.crashed) return;

      // 应用推力
      if (this.thrust && this.fuel > 0) {
        this.ship.vy -= this.thrustPower;
      }
      this.thrust = false;

      // 应用重力
      this.ship.vy += this.gravity;

      // 更新位置
      this.ship.x += this.ship.vx;
      this.ship.y += this.ship.vy;

      // 边界检查
      if (this.ship.x < this.ship.width/2) {
        this.ship.x = this.ship.width/2;
        this.ship.vx = -this.ship.vx * 0.5;
      }
      if (this.ship.x > this.canvas.width - this.ship.width/2) {
        this.ship.x = this.canvas.width - this.ship.width/2;
        this.ship.vx = -this.ship.vx * 0.5;
      }

      // 着陆检查
      if (this.ship.y + this.ship.height >= this.canvas.height - 30) {
        const speed = Math.abs(this.ship.vy);
        const inLandingZone = this.ship.x >= 150 && this.ship.x <= 250;

        if (speed < 5 && inLandingZone) {
          this.landed = true;
          this.ship.vy = 0;
          alert('成功着陆！你是一个优秀的宇航员！');
        } else {
          this.crashed = true;
          this.ship.vy = 0;
          alert(`着陆失败！${!inLandingZone ? '没有在着陆区内' : '着陆速度过快'}`);
        }
      }

      // 更新显示
      document.getElementById('fuel').textContent = Math.round(this.fuel);
      document.getElementById('velocity').textContent = Math.round(Math.abs(this.ship.vy) * 10) / 10;

      this.draw();
    }

    start() {
      this.gameLoop = setInterval(() => this.update(), 50);
      this.draw();
    }

    restart() {
      this.stop();
      this.reset();
      document.getElementById('fuel').textContent = '100';
      document.getElementById('velocity').textContent = '0';
      this.start();
    }

    stop() {
      if (this.gameLoop) {
        clearInterval(this.gameLoop);
        this.gameLoop = null;
      }
    }
  }

  // 游戏启动函数
  function startSnake() {
    showPage('snakeGame');
    currentGame = new SnakeGame();
    currentGame.start();
  }

  function startMoonLanding() {
    showPage('moonGame');
    currentGame = new MoonLandingGame();
    currentGame.start();
  }

  // 游戏控制函数
  function pauseSnake() {
    if (currentGame instanceof SnakeGame) {
      currentGame.pause();
    }
  }

  function restartSnake() {
    if (currentGame instanceof SnakeGame) {
      currentGame.restart();
    }
  }

  function thrustUp() {
    if (currentGame instanceof MoonLandingGame) {
      currentGame.activateThrust();
    }
  }

  function restartMoon() {
    if (currentGame instanceof MoonLandingGame) {
      currentGame.restart();
    }
  }

  // 回车键登录
  document.addEventListener('keypress', (e) => {
    if (e.key === 'Enter' && document.getElementById('loginPage').style.display !== 'none') {
      login();
    }
  });
</script>

</body>
</html>